<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间轴 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/timeline/timeline.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 时间轴</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>📅 时间轴演示</h2>
                
                <div class="demo-container">
                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>基础时间轴</h3>
                        <div id="basicTimeline"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>带时间的时间轴</h3>
                        <div id="timeTimeline"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>不同类型</h3>
                        <div id="typeTimeline"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>右侧布局</h3>
                        <div id="rightTimeline"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>交替布局</h3>
                        <div id="alternateTimeline"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>进行中状态</h3>
                        <div id="pendingTimeline"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>水平方向</h3>
                        <div id="horizontalTimeline"></div>
                    </div>
                </div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/timeline/timeline.css"&gt;
&lt;script src="components/timeline/timeline.js"&lt;/script&gt;

// 2. 创建容器
&lt;div id="timelineContainer"&lt;/div&gt;

// 3. 初始化时间轴组件
const timeline = new Timeline({
    container: '#timelineContainer',
    direction: 'vertical',
    mode: 'left',
    items: [
        { title: '步骤1', time: '2025-01-01', description: '完成第一步' },
        { title: '步骤2', time: '2025-01-02', description: '完成第二步' },
        { title: '步骤3', time: '2025-01-03', description: '完成第三步' }
    ]
});

// 4. 添加项
timeline.addItem({ title: '步骤4', time: '2025-01-04' });

// 5. 移除项
timeline.removeItem(0);

// 6. 更新项
timeline.updateItem(0, { title: '更新标题' });</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/timeline/timeline.js"></script>
    <script>
        // 基础时间轴
        new Timeline({
            container: '#basicTimeline',
            items: [
                { title: '步骤1', description: '完成第一步' },
                { title: '步骤2', description: '完成第二步' },
                { title: '步骤3', description: '完成第三步' }
            ]
        });

        // 带时间的时间轴
        new Timeline({
            container: '#timeTimeline',
            items: [
                { title: '步骤1', time: '2025-01-01', description: '完成第一步' },
                { title: '步骤2', time: '2025-01-02', description: '完成第二步' },
                { title: '步骤3', time: '2025-01-03', description: '完成第三步' }
            ]
        });

        // 不同类型
        new Timeline({
            container: '#typeTimeline',
            items: [
                { title: '成功', type: 'success', description: '操作成功' },
                { title: '错误', type: 'error', description: '操作失败' },
                { title: '警告', type: 'warning', description: '需要注意' },
                { title: '信息', type: 'info', description: '提示信息' }
            ]
        });

        // 右侧布局
        new Timeline({
            container: '#rightTimeline',
            mode: 'right',
            items: [
                { title: '步骤1', time: '2025-01-01', description: '完成第一步' },
                { title: '步骤2', time: '2025-01-02', description: '完成第二步' },
                { title: '步骤3', time: '2025-01-03', description: '完成第三步' }
            ]
        });

        // 交替布局
        new Timeline({
            container: '#alternateTimeline',
            mode: 'alternate',
            items: [
                { title: '步骤1', time: '2025-01-01', description: '完成第一步' },
                { title: '步骤2', time: '2025-01-02', description: '完成第二步' },
                { title: '步骤3', time: '2025-01-03', description: '完成第三步' },
                { title: '步骤4', time: '2025-01-04', description: '完成第四步' }
            ]
        });

        // 进行中状态
        new Timeline({
            container: '#pendingTimeline',
            pending: true,
            items: [
                { title: '已完成', time: '2025-01-01', description: '第一步已完成' },
                { title: '已完成', time: '2025-01-02', description: '第二步已完成' }
            ]
        });

        // 水平方向
        new Timeline({
            container: '#horizontalTimeline',
            direction: 'horizontal',
            items: [
                { title: '步骤1', description: '完成第一步' },
                { title: '步骤2', description: '完成第二步' },
                { title: '步骤3', description: '完成第三步' },
                { title: '步骤4', description: '完成第四步' }
            ]
        });
    </script>

    <style>
        .demo-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .demo-item {
            background: var(--bg-light);
            padding: 16px;
            border-radius: 8px;
            overflow: visible;
            position: relative;
        }

        .demo-item h3 {
            margin-top: 0;
            margin-bottom: 16px;
            font-size: 16px;
            color: var(--text-primary);
        }

        .demo-item > div {
            margin-bottom: 12px;
            overflow: visible;
        }

        @media (max-width: 768px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
